<template>
 <el-dialog append-to-body v-model="dialogVisible" title="包间列表" width="70%">
  <el-button @click="handleAdd"  class="button-header"  type="primary" :icon="Plus">添加包间</el-button>
  <el-form inline :model="query" class="filter" label-width="100px">
      <el-form-item label="包间名称：">
      <el-col :span="22">
        <el-input v-model="query.name" placeholder="请输入包间名称：" />
      </el-col>
    </el-form-item>
    <el-form-item class="filter-actions">
      <el-button class="button-small" type="primary" @click="handleSearch">筛选</el-button>
      <el-button type="text" class="button-reset" @click="handleClear">重置筛选条件</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" @sort-change="handleSortChange">
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="area" sortable label="面积( m²)" />
    <el-table-column prop="people" label="席位" />
    <el-table-column prop="foor" label="楼层" />
    <el-table-column prop="quantity" label="数量" />
    <el-table-column label="排序" width="180" sortable prop="sequence">
        <template #default="scope">
          <el-input-number v-model="scope.row.sequence" controls-position="right" @change="handleChangeSequence(scope.row)" :min="0" :max="99999999" />
        </template>
      </el-table-column>
    <el-table-column label="操作" align="right" width="200">
        <template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-popconfirm :width="200" class="btn-popconfirm" @confirm="handleDelete(scope.row.id)" confirmButtonText="确认" cancelButtonText="取消" title="确定要删除该场地吗？">
            <template #reference>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
  </el-table>
 </el-dialog>
 <el-dialog append-to-body :title="postForm.title" v-model="postForm.dialogVisible" width="850px">
  <el-form ref="postFormRef" label-width="150px" class="ruleForm" :model="postForm.form" :rules="postForm.rules">
    <el-form-item label="名称：" prop="name">
        <el-col :span="22">
          <el-input v-model="postForm.form.name" maxlength="20" show-word-limit placeholder="请输入包间名称" />
        </el-col>
      </el-form-item>
      <el-form-item label="面积：">
        <el-col :span="22">
          <el-input-number v-model="postForm.form.area" :min="0" controls-position="right"/> m²
        </el-col>
      </el-form-item>
      <el-form-item label="席位：">
        <el-col :span="22">
          <el-input-number v-model="postForm.form.people" :min="0" controls-position="right"/>位
        </el-col>
      </el-form-item>
      <el-form-item label="楼层：">
        <el-col :span="22">
          <el-input-number v-model="postForm.form.foor" :min="0" controls-position="right"/>层
        </el-col>
      </el-form-item>
      <el-form-item label="数量：">
        <el-col :span="22">
          <el-input-number v-model="postForm.form.quantity" :min="0" controls-position="right"/>间
        </el-col>
      </el-form-item>
  </el-form>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="postForm.dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSave(postFormRef)">确定</el-button>
    </span>
  </template>
 </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, computed } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { PrivateSave,PrivateDelete,GetPrivates,UpdatePrivateSequence } from '@/api/site'
import { ElMessage, ElForm } from 'element-plus'
import { deepClone } from '@/utils'
interface Props {
  visible: boolean,
  venueId:number,
  diningRommId:number
}
const props = withDefaults(defineProps<Props>(), {
  visible:false,
  venueId:0,
  diningRommId:0
})
const postForm = ref<DialogForm<PrivateRooms>>({
  dialogVisible: false, 
  title:'添加包间',
  form: {
    id: 0,
    venueId: 0,
    diningRommId: 0,
    name:'',
    area: 0,
    people: 0,
    foor: 0,
    quantity: 0,
    sequence: 0
  },
  rules: {
    name: [{ required: true, message: '请输入包间名称', trigger: 'blur' }],
    Price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
    people: [{ required: true, message: '请输入席位', trigger: 'blur' }],
    quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }],
  }
})
/**
 * 查询条件
 */
 const query = reactive({
  /**
   * 酒店名称
   */
  name:''
})
let isAsc = false
let sortName = 'sequence'

/**
 * 酒店列表
 */
 const tableData = ref<PrivateRooms[]>([])
 type FormInstance = InstanceType<typeof ElForm>
 const postFormRef = ref<FormInstance>()

 /**
 * 点击添加酒店
*/
const handleAdd = ():void => {
  postForm.value.dialogVisible = true
  postForm.value.title = '添加包间' 
  postForm.value.form.id = 0
  postForm.value.form.venueId = props.venueId
  postForm.value.form.diningRommId = props.diningRommId
  postForm.value.form.name = ''
  postForm.value.form.area = 0
  postForm.value.form.people = 0
  postForm.value.form.foor = 0
  postForm.value.form.quantity = 0
  postForm.value.form.sequence = 0
}
/**
 * 点击修改
 * @param formEl 
 */
 const handleEdit = (data:PrivateRooms):void => {
  postForm.value.dialogVisible = true
  postForm.value.title = '编辑包间'
  postForm.value.form = deepClone(data)
}
/**
 * 搜索
 * @param row 
 */
 const handleSearch = ():void => {
  loadData()
}
/**
 * 重置
 */
 const handleClear = (): void => {
  query.name = ''
  loadData()
}
const handleSortChange = (data: any) => {
  sortName = data.prop
  isAsc = data.order === 'ascending'
  SortTableData()
}
const SortTableData = ():void => {
   switch(sortName)
   {
    case 'sequence':
      if(isAsc) 
          tableData.value =tableData.value.sort(function(a, b) { return a.sequence - b.sequence })
        else
          tableData.value =tableData.value.sort(function(a, b) { return b.sequence - a.sequence })
      break
      case 'area':
      if(isAsc) 
            tableData.value =tableData.value.sort(function(a, b) { return a.area - b.area })
          else
            tableData.value =tableData.value.sort(function(a, b) { return b.area - a.area })
      break
   }
}
/**
 * 删除
 * @param formEl 
 */
 const handleDelete = (id:number):void => {
  PrivateDelete(id).then(((res:ServiceResponse<any>) => {
    if(res.success) {
          ElMessage.success('删除成功')
          loadData()
        } else  ElMessage.error(res.msg)
  }))
}
/**
 * 保存
 * @param formEl 
 */
 const handleSave = (formEl: FormInstance | undefined): void => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      PrivateSave(postForm.value.form).then((res:ServiceResponse<any>) => {
        if(res.success) {
          ElMessage.success('保存成功')
          loadData()
          postForm.value.dialogVisible = false
        } else if(res.msg) {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}
/**
 * 修改排序
 * @param row 
 */
 const handleChangeSequence = (row:Brand):void => {
  UpdatePrivateSequence(row.id,row.sequence).then((res:ServiceResponse<any>) => {
    if(res.success) {
          ElMessage.success('保存成功')
          loadData()
        } else  ElMessage.error(res.msg)
  })
}
 /**
  * 加载数据
  */
  const loadData = ():void => {
    GetPrivates(props.venueId, query.name).then((res:ServiceResponse<PrivateRooms[]>) => {
    if(res.success) {
      tableData.value = res.data ?? []
      SortTableData()
    }
  })
}
/**
 * 监听dialogVisible变化
 */
 watch(()=>props.visible,() => {
  loadData()
})
interface Emits {
     (e: 'update:visible', dialogVisible: boolean): void,
     (e: 'on-confirm'): void
}
const emit = defineEmits<Emits>()
const dialogVisible = computed(
  {
    get() {
        return props.visible
      },
      set(visible: boolean) {
      
        emit('update:visible', visible)
        emit('on-confirm')
      }
  }
)
</script>
<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
@import "@/assets/styles/tablePage.scss";
.ml-10 {
  margin-left: 10px;
}
.mr-10 {
  margin-right: 10px;
}
</style>